<template>
  <div>
    <!-- modal -->
    <div class="modal" v-show="isModal">
      <div class="modal-fiter"></div>
      <div class="modal-content">
        <div class="modal-center">
          <transition name="van-fade">
            <div class="ModalDli" v-show="isModal">
              <img class="c-img" src="@/assets/images/tip_cancel.png" alt @click="hide" />
              <span class="c-span">店家联系方式</span>
              <div
                v-bind:class="QQName?'c-div bgblue':'c-div bgblue bghui'"
                v-on:click="pushClick('QQ',QQName)"
              >
                <div class="null24"></div>
                <span>QQ咨询</span>
                <div class="null24"></div>
                <div class="cd-img">
                  <img src="@/assets/images/con_qq.png" alt />
                </div>
                <div class="null24"></div>
                <div class="cd-btn btnblue" v-if="QQName">查看</div>
                <div class="cd-btn bthui" v-else>未填写</div>
              </div>
              <div v-bind:class="phone?'c-div bgred':'c-div bgred bghui'">
                <a :href="'tel:' + phone">
                  <div class="null24"></div>
                  <span>联系电话</span>
                  <div class="null24"></div>
                  <div class="cd-img">
                    <img src="@/assets/images/con_mobile.png" alt />
                  </div>
                  <div class="null24"></div>
                  <div class="cd-btn btnred" v-if="phone">查看</div>
                  <div class="cd-btn bthui" v-else>未填写</div>
                </a>
              </div>
              <div
                v-bind:class="wxName?'c-div bggreen':'c-div bggreen bghui'"
                v-on:click="pushClick('微信',wxName)"
              >
                <div class="null24"></div>
                <span>加微信</span>
                <div class="null24"></div>
                <div class="cd-img">
                  <img src="@/assets/images/con_wx.png" alt />
                </div>
                <div class="null24"></div>
                <div class="cd-btn btngreen" v-if="wxName">查看</div>
                <div class="cd-btn bthui" v-else>未填写</div>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <ModalCopy :ModalCopy.sync="ModalCopy" @ModalCopyClick="ModalCopyClick"></ModalCopy>
    <ModalEwma :ModalEwma.sync="ModalEwma" @ModalEwmaClick="ModalEwmaClick"></ModalEwma>
  </div>
</template>

<script>
import mixin from "@/utils/mixin";
import ModalCopy from "@/components/ModalCopy";
import ModalEwma from "@/components/ModalEwma";
export default {
  name: "ModalDli",
  props: ["isModal", "wxName", "QQName", "phone"],
  mixins: [mixin],
  components: {
    ModalCopy,
    ModalEwma
  },
  data() {
    return {
      show: {},
      ModalCopy: {
        isModal: false,
        title: "",
        name: "",
        copy: "",
        rightBtn: ""
      },
      ModalEwma: {
        isModal: false,
        imgUrl: ""
      }
    };
  },
  mounted() {
    //console.log(this.ModalDli);
  },
  methods: {
    hide: function() {
      this.isModal = false;
      this.$emit("update:isModal", this.isModal);
    },
    pushClick(type, items) {
      if (items) {
        this.obj = items;
        if (type == "电话") {
          //v-on:click="pushClick('电话',phone)"
          //window.location.href = "tel://" + items;
        } else if (type == "QQ") {
          this.hide();
          this.ModalCopy.title = "店主的" + type + "账号";
          this.ModalCopy.name = items;
          this.ModalCopy.copy = items;
          this.ModalCopy.rightBtn = "复制" + type;
          this.ModalCopy.isModal = true;
        } else if (type == "微信") {
          this.hide();
          this.ModalEwma.imgUrl = this.wxName;
          this.ModalEwma.isModal = true;
        }
      }
    },
    ModalDliClick() {
      this.$emit("ModalDliClick", this.isModal);
      this.hide();
    },
    ModalCopyClick() {
      this.copy(".btn");
    },
    ModalEwmaClick() {}
  }
};
</script>
<style lang="scss" scoped>
.ModalDli {
  width: 600px;
  height: 460px;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  position: relative;
  .null24 {
    width: 100%;
    height: 24px;
  }
  .c-img {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 30px;
    right: 30px;
  }
  .c-span {
    font-size: 34px;
    font-family: PingFangSC-Regular;
    font-weight: bold;
    color: rgba(48, 49, 51, 1);
    position: absolute;
    top: 72px;
    left: 198px;
  }
  .bgblue {
    background: rgba(24, 172, 252, 1);
    left: 30px;
  }
  .btnblue {
    background: #4fbffc;
  }
  .bgred {
    background: rgba(255, 37, 37, 1);
    left: 220px;
  }
  .bghui {
    background: rgba(200, 200, 200, 1) !important;
  }
  .bthui {
    background: #d5d5d5;
  }
  .btnred {
    background: #ff5959;
  }
  .bggreen {
    background: rgba(48, 199, 116, 1);
    left: 410px;
  }
  .btngreen {
    background: #61d495;
  }
  .c-div {
    width: 160px;
    height: 220px;
    border-radius: 12px;
    position: absolute;
    top: 168px;
    span {
      font-size: 32px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      display: block;
      width: 100%;
      text-align: center;
    }
    .cd-img {
      width: 52px;
      height: 52px;
      margin: auto;
      position: relative;
      img {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    }

    .cd-btn {
      text-align: center;
      line-height: 30px;
      margin: auto;
      font-size: 20px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      width: 120px;
      height: 30px;
      border-radius: 15px;
    }
  }
}
</style>